<template>
  <div>
      <h2 style="margin-top: 0;">销售目标管理</h2>
    <el-row>
      <div class="block">
        <span class="demonstration">选择目标年月</span>
        <el-date-picker v-model="value1" type="month" @change="dateChange" placeholder="选择目标年月" :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <br />
    </el-row>
    <div :class="showView">
      <el-row>
        <el-button-group>
          <el-button type="info" :size='size' @click="factory" :disabled="toggleShow">厂家</el-button>
          <el-button type="info" :size='size' @click="mySelfStore" :disabled="!toggleShow">自店</el-button>
          <el-button v-if="BSave" type="success" style="float: right;" :size='size' @click="saveC">保存</el-button>
          <el-button v-if="!BSave" type="success" style="float: right;" :size='size' @click="saveZ">保存</el-button>
        </el-button-group>
      </el-row>
      <el-divider></el-divider>
      <el-form ref="form1" :model="form" :inline="true" :rules="rules" style="margin-left: 1.875rem;" label-width="130px">
        <div :class="show">
          <h3>{{showMonth}}月-厂家目标</h3>
          <div>
            <el-row>
              <el-col :span="3.5">
                <el-form-item label="综合提车目标" prop="allBuyCarTarget">
                  <el-input-number size="medium" clearable v-model="form.allBuyCarTarget" :step-strictly="true"  :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3.5">
                <el-form-item label="车型提车目标" prop="carTypeTarget">
                  <el-input-number size="medium" clearable v-model="form.carTypeTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3.5">
                <el-form-item label="金融车目标" prop="mokeyCarTarget">
                  <el-input-number size="medium" clearable v-model="form.mokeyCarTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3.5">
                <el-form-item label="保养套餐目标" prop="insuranceSetTarget">
                  <el-input-number size="medium" clearable v-model="form.insuranceSetTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3.5">
                <el-form-item label="SSI目标" prop="sSITarget">
                  <el-input-number size="medium" clearable v-model="form.sSITarget" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3.5">
                <el-form-item label="综合交车目标" prop="allGiveTarget">
                  <el-input-number size="medium" clearable v-model="form.allGiveTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3.5">
                <el-form-item label="置换目标" prop="exchangeTarget">
                  <el-input-number size="medium" clearable v-model="form.exchangeTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3.5">
                <el-form-item label="精品目标" prop="boutiqueTarget">
                  <el-input-number size="medium" clearable v-model="form.boutiqueTarget"  :step-strictly="true":min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3.5">
                <el-form-item label="延保目标" prop="lengthenInsuranceTarget">
                  <el-input-number size="medium" clearable v-model="form.lengthenInsuranceTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3.5">
                <el-form-item label="保险目标" prop="insuranceTarget">
                  <el-input-number size="medium" clearable v-model="form.insuranceTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3.5">
                <el-form-item label="第三方评核目标" prop="theThirdLookTarget">
                  <el-input-number size="medium" clearable v-model="form.theThirdLookTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="3.5">
                <el-form-item label="厂家现场评核目标" prop="factoryLookTarget">
                  <el-input-number size="medium" clearable v-model="form.factoryLookTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3.5">
                <el-form-item label="车型交车目标" prop="carTypGiveeTarget">
                  <el-input-number size="medium" clearable v-model="form.carTypGiveeTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div :class="show1">
        <h3>{{showMonth}}月-自店目标</h3>
        <el-form :model="formZ" ref="formZ" :inline="true" style="margin-left: 1.875rem;" :rules="ZRules" label-width="130px">
          <el-row>
            <el-col :span="3.5">
              <el-form-item label="目标人员" prop="userId">
                <el-select v-model="formz1.userId" placeholder="请选择" size="medium" @change="aaa">
                  <el-option v-for="item in xiaoShou" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="综合交车目标" prop="myAllBuyCarTarget">
            <el-input-number size="medium" clearable v-model="formZ.myAllBuyCarTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item>

          <el-form-item label="商业险目标" prop="myInsuranceTargetS">
            <el-input-number size="medium" clearable v-model="formZ.myInsuranceTargetS" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item>
          <el-form-item label="交强险目标" prop="myInsuranceTarget">
            <el-input-number size="medium" clearable v-model="formZ.myInsuranceTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item> <br />
          <el-form-item label="保养套餐目标" prop="myInsuranceSetTarget">
            <el-input-number size="medium" clearable v-model="formZ.myInsuranceSetTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item>
          <el-form-item label="SSI目标" prop="mySSITarget">
            <el-input-number size="medium" clearable v-model="formZ.mySSITarget" :step="0.1":min="0" :controls="false"></el-input-number>
          </el-form-item>
          <el-form-item label="车型交车目标" prop="myCarTypGiveeTarget">
            <el-input-number size="medium" clearable v-model="formZ.myCarTypGiveeTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item><br />
          <el-form-item label="置换目标" prop="myExchangeTarget">
            <el-input-number size="medium" clearable v-model="formZ.myExchangeTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item>
          <el-form-item label="精品目标" prop="myBoutiqueTarget">
            <el-input-number size="medium" clearable v-model="formZ.myBoutiqueTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item>
          <el-form-item label="延保目标" prop="mylengthenInsuranceTarget">
            <el-input-number size="medium" clearable v-model="formZ.mylengthenInsuranceTarget" :step-strictly="true"  :min="0":controls="false"></el-input-number>
          </el-form-item><br />
          <el-form-item label="金融车目标" prop="myMokeyCarTarget">
            <el-input-number size="medium" clearable v-model="formZ.myMokeyCarTarget" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item>
          <el-form-item label="新车代办上牌台数" prop="xinChengDaiBanShu">
            <el-input-number size="medium" clearable v-model="formZ.xinChengDaiBanShu" :step-strictly="true" :min="0" :controls="false"></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
<!--      <el-button :class="show" type="primary" style="float: right;" :size='size' @click="saveC">保存</el-button>
      <el-button :class="show1" type="primary" style="float: right;" :size='size' @click="saveZ">保存</el-button> -->
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inject: ['reload'],
        //限制时间只能选择
        pickerOptions: {
          disabledDate(time) {
            const date = new Date()
            const year = date.getFullYear()
            //每增加下面一行的“3”，就可以向前多选一个月
            let month = date.getMonth() + 3
            if (month >= 1 && month <= 9) {
              month = '0' + month
            }
            const currentDate = year.toString() + month.toString()
            const timeYear = time.getFullYear()
            let timeMonth = time.getMonth() + 1
            if (timeMonth >= 1 && timeMonth <= 9) {
              timeMonth = '0' + timeMonth
            }
            const timeDate = timeYear.toString() + timeMonth.toString()
            // return currentDate <= timeDate
            let month1 = date.getMonth() + 1
            if (month1 >= 1 && month1 <= 9) {
              month1 = '0' + month1
            }
            const currentDate1 = year.toString() + month1.toString()
            const timeYear1 = time.getFullYear()
            //每增加下面一行的“1”，就可以向后多选一个月
            let timeMonth1 = time.getMonth() + 2
            if (timeMonth1 >= 1 && timeMonth1 <= 9) {
              timeMonth1 = '0' + timeMonth1
            }
            const timeDate1 = timeYear1.toString() + timeMonth1.toString()
            return currentDate <= timeDate || currentDate1 >= timeDate1;
          }
        },
        BSave:true,//分辨保存按钮
        xiaoShou: [],
        showMonth: '', //显示当前是几月
        showView: 'none', //整体页面是否显示
        toggleShow: true,
        size: 'small',
        formz1: {
          userId: ''
        },
        form: {
          years: '',
          month: '',
        },
        formDefault: {
          years: '',
          month: '',
          allBuyCarTarget: null,
          mokeyCarTarget: null,
          insuranceSetTarget: null,
          sSITarget: null,
          allGiveTarget: null,
          exchangeTarget: null,
          boutiqueTarget: null,
          lengthenInsuranceTarget: null,
          insuranceTarget: null,
          theThirdLookTarget: null,
          factoryLookTarget: null,
        },
        formZ: {
          // userId:"",
          myAllBuyCarTarget: null,
          myMokeyCarTarget: null,
          xinChengDaiBanShu:null,
          myInsuranceTarget: null,
          myInsuranceTargetS: null,
          myInsuranceSetTarget: null,
          mySSITarget: null,
          myExchangeTarget: null,
          myBoutiqueTarget: null,
          mylengthenInsuranceTarget: null,
        },
        show: "", //添加不隐藏类（名称）
        show1: "none", //添加隐藏类（名称）
        value1: null, //绑定日期选择器的值（无意义）
        rules: {
          carTypeTarget: [{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }],
          carTypGiveeTarget: [{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }],
        },
        rulesFactory: {
          carTypeTarget: [{
            required: true,
            message: '请输入车型提车目标',
            trigger: 'blur'
          }],
          carTypGiveeTarget: [{
            required: true,
            message: '请输入车型交车目标',
            trigger: 'blur'
          }],
        },
        ZRules: {},
        prop: {
          value: 'label',
          label: "label",
          children: "children"
        },
      }
    },
    methods: {
      aaa() {
        var a = this.formz1.userId;
        this.$ajax.post("TargetAndBackMonkeyPeopleController/findByuserId", {
          "userId": a,
          'date': this.value1
        }).then(res => {
          var result = res.data
          if (result.success) {
            this.formZ = result.data
          } else {
            this.formZ = {
              myAllBuyCarTarget: null,
              myMokeyCarTarget: null,
              xinChengDaiBanShu:null,
              myInsuranceTarget: null,
              myInsuranceTargetS: null,
              myInsuranceSetTarget: null,
              mySSITarget: null,
              myCarTypGiveeTarget: null,
              myExchangeTarget: null,
              myBoutiqueTarget: null,
              mylengthenInsuranceTarget: null,
            }
          }
        })
      },
      //点击厂家
      factory() {
        this.BSave = !this.BSave
        this.rules = this.rulesFactory
        this.toggleShow = true;
        this.show = "";
        this.show1 = "none"
      },
      //点击自店
      mySelfStore() {
        this.BSave = !this.BSave
        this.rules = this.rulesMy
        this.toggleShow = false;
        this.show = "none";
        this.show1 = ""
      },
      //厂家保存方法
      saveC() {
        this.$refs.form1.validate(valid => {
          if (valid) {
            this.$ajax.post("TargetAndBackMonkey2/save", this.form).then(res => {
              var result = res.data;
              if (result.success) {
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                this.refresh()
              }
            })
          }
        })
      },
      saveZ() {
        if (this.formz1.userId == null) {
          this.$confirm('请先选择目标人员', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }else{
        this.$refs.formZ.validate(valid => {
          if (valid) {
            this.formZ.userId = this.formz1.userId
            this.$ajax.post("TargetAndBackMonkeyPeopleController/save", Object.assign({}, this.formZ, {
              'date': this.value1
            })).then(res => {
              var result = res.data;
              if (result.success) {
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
              }
            })
          }
        })
       }

      },
      //日期改变触发
      dateChange(a) {
        this.formZ = {}
        this.formz1 = {}
        this.getXiaoShou()
        this.showView = ''; //改变主页面的隐藏样式为空
        this.form.years = (a.getYear() + 1900); //获取年
        this.form.month = (a.getMonth() + 1) //获取月
        this.showMonth = this.form.month; //主页面显示现在是几月
        //通过年和月查找表数据
        this.$ajax.post("TargetAndBackMonkey/findyears", { //判断改年月是否存在，如存在，就将该年月带入刷新方法
          'years': this.form.years,
          'month': this.form.month
        }).then(res => {
          var result = res.data
          if (result == true) {
            this.refresh()
          } else {
            this.form = this.formDefault
            //清空后年月消失，重新赋值
            this.form.years = (a.getYear() + 1900)
            this.form.month = (a.getMonth() + 1)
          }
        })
      },
      //刷新方法
      refresh() {
        this.$ajax.post("TargetAndBackMonkey2/findbydate", {
          'years': this.form.years,
          'month': this.form.month
        }).then(res => {

          var result = res.data
          this.form = result.data
          this.form.id = result.data.target.id
        })
      },
      //获得销售部人员
      getXiaoShou() {
        this.$ajax.post('TargetAndBackMonkey2/findXiaoShou', {}).then(res => {
          var result = res.data
          this.xiaoShou = result.data
        })
      }
    },
    created() {
      this.getXiaoShou()
    }
  }

  function emptyObj(obj) {

    for (var key in obj) {
      var o = obj[key];
      if (o instanceof Object) {
        emptyObj(o);
      } else {
        obj[key] = '';
      }
    }
  }
</script>

<style>
  .none {
    display: none;
  }
</style>
